<template>
  <view class="page">
    <UserDate/>
    <view v-if="sign" class="tcard flexC top">
      <img class="success" :src="`${$store.state.baseApi}/bg-header/sign_success.png`" alt="">
      <view class="success_txt">
        检查报到成功
      </view>
    </view>
    
    <view v-else class="tcard flexC top">
      <view class="component-qr">
      	<tki-qrcode
      		ref="qrcode"
      		onval
      		:val="qrCode || 123"
      		:size="180"
      		:load-make="true"
      		:show-loading="false"/>
      </view>
      
      <view class="cardNo">
        门诊号{{userInfo.cardNo}}
      </view>
    </view>
    
    <view class="tcard" style="margin: 0;">
      <view class="title">
        签到信息
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">检查项目</view>
          <view class="value">肾脏超声检查</view>
        </view>
        <view class="tform-item">
          <view class="label">预约科室</view>
          <view class="value">骨科门诊</view>
        </view>
        <view class="tform-item">
          <view class="label ">就诊位置</view>
          <view class="value red">
            <view class="pst flexC" @click="$router.push('/pages/navInHsp/navInHsp')">
              <img :src="`${$store.state.baseApi}/icon/way.png`" alt="">
              路线
            </view>
            门诊三楼B区外科诊区
          </view>
        </view>
        <view class="tform-item">
          <view class="label">检查室</view>
          <view class="value">一检查室</view>
        </view>
        <view class="tform-item">
          <view class="label">预约时间</view>
          <view class="value red">2024-08-12（周一） 10:00～10:30</view>
        </view>
        <view class="tform-item lang-txt">
          <view class="label">检查序号</view>
          <view v-if="sign" class="value">10</view>
          <view v-else class="value red">
            扫描门诊号报道成功后，点击刷新按钮可以查看检查序号
          </view>
        </view>
        <view class="tform-item lang-txt" style="border: none;">
          <view class="label red">注意事项</view>
          <view class="value">
            前一天晚餐请清淡饮食，夜间12点后禁饮禁食
          </view>
        </view>
        
        <view class="line"></view>
        
        <view class="btn-box flexR">
          <view v-if="sign" class="btn" style="background-color: #FFAA32;" @click="toSignin">
            查看候诊详情
          </view>
          <view class="btn" @click="refresh">
            刷新
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import UserDate from '@/components/UserInfo/user-date.vue'
  import tkiQrcode from '@/components/QrCode/tki-qrcode.vue'
  import { mapActions, mapGetters } from 'vuex';
  
  export default {
    components: {UserDate, tkiQrcode},
    data() {
      return {
        sign: false
      }
    },
    computed:{
    	...mapGetters(['userInfo']),
    },
    methods: {
      toPage() {
        uni.navigateTo({
          url: `./queue`
        })
      },
      refresh() {
        this.sign = !this.sign
      }
    }
  }
</script>

<style lang="scss" scoped>
.tcard {
  align-items: center;
  .label {
    margin-right: 50upx;
  }
  .success {
    width: 110upx;
    height: 110upx;
  }
  .success_txt {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 36upx;
    color: #4ED1AC;
    line-height: 54upx;
    margin-top: 10upx;
  }
}
.value {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28upx;
  color: rgba(0,0,0,0.7);
  line-height: 44upx;
  position: relative;
  .pst {
    height: 0;
    margin-top: -10upx;
    margin-left: 10px;
    align-items: center;
    float: right;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24upx;
    color: #3E81F7;
    line-height: 44upx;
    margin-right: -8upx;
    >img {
      width: 32upx;
      height: 32upx;
    }
  }
}
.btn-box {
  justify-content: flex-end;
  gap: 20upx;
}
.btn {
  width: 200upx;
  height: 54upx;
  margin-top: 24upx;
  background: $theme-color;
  border-radius: 28upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #FFFFFF;
  line-height: 54upx;
  text-align: center;
}
.top {
  height: 288upx;
  justify-content: center;
}
.component-qr {
  margin: 20upx;
}
.cardNo {
  line-height: 2;
}
.lang-txt {
  .label {
    
  }
  .value {
    flex: 1;
    text-align: right;
  }
}
</style>
